<template>
  <div class="Create">
    <Header :zIndex="2" ref="Header"></Header>
    <!-- 创建活动盒子 -->
    <div class="found_box">
      <div class="found_content_box">
        <!-- 左边手机模拟样式 -->
        <div :class="scrollTopFlag == 1 ? 'found_left front-left-fix' : 'found_left'">
          <div class="preview_sj" style="color: rgb(255, 151, 13)">
            温馨提示：以下是模拟效果，实际效果请保存后在手机中查看
          </div>
          <div class="phone_box">
            <div class="phone_new_tit">{{ actData.title }}</div>
            <div class="iframe_box">
              <iframe id="phonebox" ref="iframe" :src="mbUrl" scrolling="auto" frameborder="none" width="323px" height="579px" class="phone_iframe"></iframe>
            </div>
          </div>
        </div>
        <!-- 右边创建活动模块 -->
        <div :class="scrollTopFlag == 1 ? 'fount_right front-right-fix' : 'fount_right'">
          <ul class="rightTit">
            <li :class="actIndex == 1 ? 'on' : ''" @click="actIndexClick(1)">
              <span>1</span> 基础设置
            </li>
            <li :class="actIndex == 2 ? 'on' : ''" @click="actIndexClick(2)">
              <span>2</span>样式设置
            </li>
            <li :class="actIndex == 3 ? 'on' : ''" @click="actIndexClick(3)">
              <span>3</span>功能设置
            </li>
            <li :class="actIndex == 4 ? 'on' : ''" @click="actIndexClick(4)">
              <span>4</span>高级功能
            </li>
          </ul>
          <div class="form rightCon1">
            <!-- 基础功能设置表单 -->
            <div class="set" v-if="actIndex == 1">
              <div class="activity_con">
                <div class="seizhi4_theader">
                  <div class="tab_title">基本设置</div>
                  <div class="active_box">
                    <div class="activity_name">活动名称</div>
                    <el-input @change="titleChange" v-model="actData.title" placeholder="请输入活动标题" ></el-input>
                  </div>
                  <div class="active_box">
                    <div class="activity_name" >是否展示活动公告</div>
                     <el-radio-group v-model="actData.showNotice" @change="noticeChange" fill="#6f8cf0">
                        <el-radio-button :label="false">关闭</el-radio-button>
                        <el-radio-button :label="true">开启</el-radio-button>
                      </el-radio-group>
                  </div>
                  <div class="active_box" v-if="actData.showNotice">
                    <div class="activity_name" >活动公告</div>
                    <el-input @change="noticeChange" v-model="actData.notice" maxlength="50" placeholder="请输入活动公告（不超过50字）" ></el-input>
                  </div>
                  <div class="active_box">
                    <div class="activity_name">活动时间</div>
                    <el-date-picker
                      v-model="actTimeRange"
                      @change="changeTime"
                      type="datetimerange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期">
                    </el-date-picker>
                  </div>
                  <div class="active_box">
                    <div class="activity_name">投票时段</div>
                    <el-time-picker
                      v-model="voteTimeRange"
                      @change="changeVoteTime"
                      is-range
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期">
                    </el-time-picker>
                  </div>
                  <div class="activity_line"></div>
                  <div class="activity_name" style="line-height: 50px">
                    活动介绍
                  </div>
                  <div style="width: 100%">
                    <!-- 富文本编辑器 -->
                    <vue-ueditor-wrap v-model="actData.intro" :config="editorConfig"></vue-ueditor-wrap>
                  </div>
                  <div class="tishi">
                    请勿在活动中发布含有诱导分享的文字或图片，一经发现将被立即停止活动；
                    <a href="http://weixin.qq.com/cgi-bin/readtemplate?t=weixin_external_links_content_management_specification" target="_blank">（具体规范请参考 微信外部链接内容管理规范）</a>
                  </div>
                </div>
                <p style="font-size: 16px; color: red; margin-top: 10px;padding: 10px 0 20px;">
                  保存发布后添加选手
                </p>
                <div class="fabu_btn" @click="saveStep(2)">保存进入下一步</div>
              </div>
            </div>
            <!-- 创建活动第二步 -->
            <div class="set" v-if="actIndex == 2">
              <div class="activity_con">
                <div class="seizhi4_theader">
                  <div class="tab_title">图片设置</div>
                  <div class="active_box">
                    <div class="activity_name">开屏广告</div>
                    <div style="padding-top:10px">
                      <el-radio-group v-model="actData.showOpenAd" fill="#6f8cf0">
                        <el-radio-button :label="false">关闭</el-radio-button>
                        <el-radio-button :label="true">开启</el-radio-button>
                      </el-radio-group>
                    </div>
                  </div>
                  <div class="active_box" v-if="actData.showOpenAd">
                    <van-uploader v-model="fileList0" multiple :preview-options="previewConfig" :max-count="1" accept="image/jpeg,image/png"
                    upload-text="上传图片" name="qdicon" :before-read="uploadImgCheck" :after-read="uploadOneFile('qdicon')" />
                  </div>
                  <div style="color: rgb(155, 155, 155);font-size: 12px; margin-top: 6px;"  v-if="actData.showOpenAd">
                      建议图片尺寸720 x 1280，图片为jpg/png格式，且大小小于3M。
                  </div>
                  <div class="active_box">
                    <div class="activity_name" style="margin-top: 5px;">
                      <div class="xuanze_cover">
                        活动封面设置
                      </div>
                    </div>
                      <div style="margin-left: 10px;margin-top: 10px;">
                        <el-button icon="el-icon-picture" @click="coverShowChange(1)">选择系统封面</el-button>
                      </div>
                  </div>
                  <el-dialog title="选择系统封面" width="960px" top="5vh" :visible.sync="coverShow" @close="coverShow=false;">
                    <el-row>
                      <div class="cover_group">
                        <el-button :type="coverIndex == 0 ? 'primary' : ''" @click="coverChange(0)">全部</el-button>
                        <el-button :type="coverIndex == -1 ? 'primary' : ''" @click="coverChange(-1)">热门推荐</el-button>
                        <el-button :type="coverIndex == item.id ? 'primary' : ''" v-for="(item,index) in siteData.coverGroup" :key="index" @click="coverChange(item.id)">{{item.name}}</el-button>
                      </div>
                    </el-row>
                    <el-row style="padding-top:15px">
                      <div class="cover_list">
                        <el-image :class="actData.covers.indexOf(item.url)>=0 ? 'cover_item cover_item_on' : 'cover_item'" 
                          v-for="(item, index) in sysCovers" :key="index" :src="siteData.domain + item.url" 
                          lazy @click="coverClick(item.url)"></el-image>
                      </div>
                    </el-row>
                  </el-dialog>
                  <div class="active_box">
                    <div class="cover on">
                      <div style="margin: 5px 0px">
                        <van-uploader v-model="coverList" multiple :max-count="coverMax" :preview-options="previewConfig"
                         accept="image/jpeg,image/png" upload-text="上传图片" 
                          :before-delete="coverListRemove" :before-read="uploadCover"></van-uploader>
                      </div>
                      <div style="color: rgb(155, 155, 155);font-size: 12px; margin-top: 6px;">
                        支持上传{{coverMax}}张封面（轮播效果），系统封面仅能选择一张，图片为jpg/png格式，且每张大小小于3M。
                      </div>
                    </div>
                  </div>
                  <div class="active_box">
                    <div class="activity_name" style="margin-top: 5px;">
                      <div class="xuanze_cover">
                        背景图设置
                      </div>
                    </div>
                    <div style="margin-left: 10px;margin-top: 10px;height: 38px;" class="xuanze_cover btn">
                      <el-button icon="el-icon-picture" @click="bgimgShowChange(1)">选择背景图</el-button>
                    </div>
                  </div>
                  <div style="margin: 5px 0px;">
                    <van-uploader v-model="bgimgSite" :max-count="1" upload-text="上传图片" name="bgimg" accept="image/jpeg,image/png"
                      :preview-options="previewConfig" :before-read="uploadBgImageCheck" :before-delete="bgImageRemove" :after-read="uploadOneFile('bgimg')" />
                  </div>
                  <div style="color: rgb(155, 155, 155);font-size: 12px; margin-top: 6px;">
                        建议图片宽度750像素，图片为jpg/png格式，且大小小于3M。
                  </div>
                  <el-dialog title="选择背景图" width="960px" top="5vh" :visible.sync="bgimgShow" @close="bgimgShow = false">
                    <el-row>
                      <div class="cover_group">
                        <el-button :type="bgIndex == 0 ? 'primary' : ''" @click="bgChange(0)">全部</el-button>
                        <el-button :type="bgIndex == -1 ? 'primary' : ''" @click="bgChange(-1)">热门推荐</el-button>
                        <el-button :type="bgIndex == item.id ? 'primary' : ''" v-for="(item,index) in siteData.bgGroup" :key="index" @click="bgChange(item.id)">{{item.name}}</el-button>
                      </div>
                    </el-row>
                    <el-row style="padding-top:15px">
                    <div class="cover_list">
                      <el-image :class="actData.bgImage == item.url ? 'bg_item bg_item_on' : 'bg_item'" 
                          v-for="(item, index) in sysBgImgs" :key="index" :src="siteData.domain + item.url" 
                          lazy @click="bgImgClick(item.url)"></el-image>
                    </div>
                    </el-row>
                  </el-dialog>
                </div>
          <!-- 参数设置 -->
                <div class="seizhi4_theader">
                  <div class="tab_title">参数设置</div>
                  <div class="active_box" style="margin-top: 20px">
                    <div class="activity_name">主题设置</div>
                    <ul class="style_box">
                      <li :class="actData.tempId == item.id ? 'newTheme change_newTheme' : 'newTheme'" v-for="(item, index) in siteData.temps" :key="index" @click="actDataFieldChange(item, 'muban')">
                        {{ item.name }}
                        <img alt="" :src="siteData.domain + item.thumbnail" class="them-img" />
                      </li>
                    </ul>
                  </div>
                  <div class="alert_box"></div>
                  <div class="active_box" v-if="colorShow">
                    <div class="activity_name pifu">配色设置</div>
                    <ul class="old_stylebox">
                      <li class="style_every" :style="item.color" v-for="(item, index) in colorData" :key="index" @click="actDataFieldChange(item.key, 'color')">
                        <img src="../assets/img/duihao.png" :class="actData.primaryColor == item.key ? 'on' : ''" />
                      </li>
                    </ul>
                  </div>
                  <div class="active_box">
                    <div class="activity_name xuanshou" style="margin-top: 8px">
                      漂浮物
                    </div>
                    <ul class="piaofu_box">
                      <li :class="!actData.drift ? 'on' : ''" @click="driftChange('')">无</li>
                      <li :class="actData.drift == item.url ? 'on' : ''" v-for="(item, index) in siteData.drift" :key="index" @click="driftChange(item.url)">
                        <img :src="siteData.domain + item.url" />
                      </li>
                    </ul>
                  </div>
                  <div class="active_box">
                    <div class="activity_name">
                      背景音乐
                    </div>
                    <div class="music-handle-box">
                      <el-select
                        v-model="bgMusic"
                        placeholder="请选择背景音乐"
                        @change="musicChange">
                        <el-option label="清除背景音乐" value="clear"></el-option>
                        <!--<el-option label="上传本地音乐" value=""></el-option>-->
                        <el-option
                          v-for="(item, index) in siteData.music"
                          :key="index"
                          :label="item.name"
                          :value="item.url"></el-option>
                      </el-select>
                      <el-row v-if="showMusicUpload">
                        <el-upload action="#" :http-request="uploadMusic" :before-upload="uploadMusicCheck" :limit="1" :multiple="false" :show-file-list="false" accept=".mp3">
                          <el-button slot="trigger" type="primary" size="small">上传音乐</el-button>
                          <el-button style="margin-left:10px;" :disabled="!locMusic" @click="playMusic(true)">音乐试听</el-button>
                          <el-button :disabled="!locMusic" @click="playMusic(false)">暂停播放</el-button>
                          <el-button :disabled="!locMusic" @click="delMusic">删除音乐</el-button>
                        </el-upload>
                      </el-row>
                    </div>
                  </div>
                  <!-- 投票按钮单选 -->
                  <div class="active_box">
                    <div class="activity_name">投票按钮</div>
                    <div style="margin-top: 7px">
                      <el-radio-group v-model="actData.btnText" fill="#6f8cf0" @change="changeButtonText">
                        <el-radio-button label="投票"></el-radio-button>
                        <el-radio-button label="点赞"></el-radio-button>
                        <el-radio-button label="支持"></el-radio-button>
                        <el-radio-button label="加油"></el-radio-button>
                    </el-radio-group>
                    </div>
                  </div>
                  <div class="active_box">
                    <div class="activity_name">选手称谓</div>
                    <div style="margin-top: 7px">
                      <el-radio-group v-model="actData.playerCall" fill="#6f8cf0">
                        <el-radio-button label="选手"></el-radio-button>
                        <el-radio-button label="企业"></el-radio-button>
                        <el-radio-button label="作品"></el-radio-button>
                    </el-radio-group>
                    </div>
                  </div>
                  <div class="active_box" style="">
                    <div class="activity_time">选手排序</div>
                    <div style="margin-top: 12px">
                      <el-radio-group v-model="actData.sortType" fill="#6f8cf0">
                        <el-radio-button :label="1">编号从低到高</el-radio-button>
                        <el-radio-button :label="2">票数从高到低</el-radio-button>
                        <el-radio-button :label="3">报名时间倒序</el-radio-button>
                      </el-radio-group>
                    </div>
                  </div>
                  <div class="active_box">
                    <div class="activity_name">活动介绍内容</div>
                    <div style="margin-top:12px">
                      <el-radio-group v-model="actData.openIntro" fill="#6f8cf0" @change="sendData">
                        <el-radio-button :label="false">折叠</el-radio-button>
                        <el-radio-button :label="true">展开</el-radio-button>
                      </el-radio-group>
                    </div>
                  </div>
                  <div class="active_box">
                    <div class="activity_name">选手进入详情</div>
                    <div style="margin-top:12px">
                      <el-radio-group v-model="actData.showPlayerInfo" fill="#6f8cf0" @change="sendData">
                        <el-radio-button :label="false">关闭</el-radio-button>
                        <el-radio-button :label="true">开启</el-radio-button>
                      </el-radio-group>
                    </div>
                  </div>
                  <div class="active_box" key="1">
                    <div class="activity_name">选手列数</div>
                    <div style="margin-top:12px">
                      <el-radio-group v-model="actData.palyerCol" fill="#6f8cf0" @change="sendData">
                        <el-radio-button :label="1">一列</el-radio-button>
                        <el-radio-button :label="2">二列</el-radio-button>
                         <el-radio-button :label="3">三列</el-radio-button>
                      </el-radio-group>
                    </div>
                  </div>
                      <div class="active_box" v-if="actData.palyerCol===1" key="2">
                    <div class="activity_name">单列显示</div>
                    <div style="margin-top:12px">
                      <el-radio-group v-model="actData.singleCol" fill="#6f8cf0" @change="sendData">
                        <el-radio-button :label="1">左右</el-radio-button>
                        <el-radio-button :label="2">上下</el-radio-button>
                      </el-radio-group>
                    </div>
                  </div>
                  <div class="active_box" v-if="actData.palyerCol!==1" key="3">
                    <div class="activity_name">页面显示</div>
                    <div style="margin-top:12px">
                      <el-radio-group v-model="actData.showType" fill="#6f8cf0" @change="sendData">
                        <el-radio-button :label="1">瀑布流</el-radio-button>
                        <el-radio-button :label="2">对称</el-radio-button>
                      </el-radio-group>
                    </div>
                  </div>
                  <div class="activity_name" style="margin-top: 20px">
                    底部菜单
                  </div>
                  <div class="footerCheck">
                    <el-checkbox fill="#6f8cf0"
                                 v-for="(item, index) in footer"
                                 :label="item.name"
                                 :key="index"
                                 v-model="footer[index].value"
                                 name="index"
                                 @change="footerChange(index)">
                      {{ item.name }}
                    </el-checkbox>
                  </div>
                  <div class="activity_name" v-if="footerUrlShow">
                    自定义名称
                    <input type="text" v-model="autoname" placeholder="请输入自定义名称，最多三个字" maxlength="3" placeholder-style="color:#eee" class="activity_input" v-on:input="footerNameInput" />
                  </div>
                  <div class="activity_name" v-if="footerUrlShow">
                    自定义地址
                    <input type="text" v-model="footerUrl" placeholder="请输入自定义地址，必须以 http:// 或 https:// 开头" class="activity_input" v-on:blur="footerUrlInput" />
                  </div>
                </div>
                <p style="font-size: 16px; color: red; margin-top: 10px">
                  保存发布后添加选手
                </p>
              </div>
              <div class="fabu_btn" @click="saveStep(3)">继续设置</div>
            </div>
            <div class="set" v-if="actIndex == 3">
              <div class="activity_con">
                <div class="seizhi4_theader">
                  <div class="tab_title">选手报名设置</div>
                  <el-alert title="应相关部门要求，报名选手必须符合相关规定且需主办方审核，否则造成违法行为由主办方负责" :closable="false" type="warning" show-icon></el-alert>
                  <div class="active_box">
                    <div class="activity_name">是否开启选手自主报名</div>
                    <div style="padding-top: 12px">
                      <el-radio-group v-model="actData.canEnroll"  fill="#6f8cf0" @change="enrollChange">
                        <el-radio-button :label="false">关闭</el-radio-button>
                        <el-radio-button :label="true">开启</el-radio-button>
                      </el-radio-group>
                    </div>
                    <div class="wen_ts" style="margin-top: 18px">
                      <img src="../assets/img/wen.png" alt="" class="wen" />
                      <img src="../assets/img/baomiung.png" alt="" class="tstp" />
                    </div>
                  </div>
                  <div class="active_box"  style="margin-bottom: 10px" v-if="actData.canEnroll">
                    <div class="activity_name">报名信息是否需要审核</div>
                    <div style="padding-top: 12px">
                      <el-radio-group v-model="actData.verifyPlayer"  fill="#6f8cf0">
                        <el-radio-button :label="false">关闭</el-radio-button>
                        <el-radio-button :label="true">开启</el-radio-button>
                      </el-radio-group>
                    </div>
                  </div>
                  <!-- 开启选手报名展示这块 -->
                  <div class="activity_time_box" v-if="actData.canEnroll" style="margin-bottom: 15px">
                    <div class="activity_name">报名时间</div>
                    <div class="activity_time_stat">
                      <el-date-picker
                        v-model="signupTime"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        format="yyyy-MM-dd HH:mm:ss"
                        @change="enrollTimeChange">
                      </el-date-picker>
                    </div>
                  </div>
                  <div class="itemData" style="padding: 20px;border: 1px solid #03A9F4;border-radius: 5px;" v-if="actData.canEnroll">
                    <div class="active_box">
                      <div class="activity_name">
                        <el-input v-model="actData.enroll.playerNameTitle" size="small" maxlength="5" style="width:100px"></el-input>
                      </div>
                      <div style="margin-top: 10px">
                        <el-radio-group :value="1" fill="#6f8cf0">
                          <el-radio-button :label="1">必填</el-radio-button>
                        </el-radio-group>
                      </div>
                    </div>
                    <div class="active_box">
                      <div class="activity_name">
                        <el-input v-model="actData.enroll.playerPhotoTitle" size="small" maxlength="5" style="width:100px"></el-input>
                      </div>
                      <div style="margin-top: 10px">
                        <el-radio-group v-model="actData.enroll.playerPhoto" fill="#6f8cf0">
                          <el-radio-button :label="1">必填</el-radio-button>
                          <el-radio-button :label="2">选填</el-radio-button>
                          <el-radio-button :label="0">隐藏</el-radio-button>
                        </el-radio-group>
                        
                      </div>
                    </div>
                    <div class="active_box">
                      <div class="activity_name">
                        <el-input v-model="actData.enroll.playerPhoneTitle" size="small" maxlength="5" style="width:100px"></el-input>
                      </div>
                      <div style="margin-top: 10px">
                        <el-radio-group v-model="actData.enroll.playerPhone" fill="#6f8cf0">
                          <el-radio-button :label="1">必填</el-radio-button>
                          <el-radio-button :label="2">选填</el-radio-button>
                          <el-radio-button :label="0">隐藏</el-radio-button>
                        </el-radio-group>
                      </div>
                    </div>
                    <div class="active_box">
                      <div class="activity_name">
                        <el-input v-model="actData.enroll.playerInfoTitle" size="small" maxlength="5" style="width:100px"></el-input>
                      </div>
                      <div style="margin-top: 10px">
                        <el-radio-group v-model="actData.enroll.playerInfo" fill="#6f8cf0">
                          <el-radio-button :label="1">必填</el-radio-button>
                          <el-radio-button :label="2">选填</el-radio-button>
                          <el-radio-button :label="0">隐藏</el-radio-button>
                        </el-radio-group>
                      </div>
                    </div>
                    <div class="active_box">
                      <div class="activity_name">
                        <el-input v-model="actData.enroll.playerAudioTitle" size="small" maxlength="5" style="width:100px"></el-input>
                      </div>
                      <div style="margin-top: 10px">
                        <el-radio-group v-model="actData.enroll.playerAudio" fill="#6f8cf0">
                          <el-radio-button :label="1">必填</el-radio-button>
                          <el-radio-button :label="2">选填</el-radio-button>
                          <el-radio-button :label="0">隐藏</el-radio-button>
                        </el-radio-group>
                      </div>
                    </div>
                    <div class="active_box">
                      <div class="activity_name">
                        <el-input v-model="actData.enroll.playerVideoTitle" size="small" maxlength="5" style="width:100px"></el-input>
                      </div>
                      <div style="margin-top: 10px">
                        <el-radio-group v-model="actData.enroll.playerVideo" fill="#6f8cf0">
                          <el-radio-button :label="1">必填</el-radio-button>
                          <el-radio-button :label="2">选填</el-radio-button>
                          <el-radio-button :label="0">隐藏</el-radio-button>
                        </el-radio-group>
                      </div>
                    </div>

                    <div class="active_box" v-for="(item,index) in actData.enroll.items" :key="index">
                      <div class="activity_name">
                        <el-input v-model="item.name" size="small" maxlength="5" style="width:100px"></el-input>
                      </div>
                      <div style="margin-top: 10px">
                        <el-radio-group v-model="item.type" fill="#6f8cf0">
                          <el-radio-button :label="1">必填</el-radio-button>
                          <el-radio-button :label="2">选填</el-radio-button>
                        </el-radio-group>
                      </div>
                      <div class="activity_name" style="padding-left:80px">
                        <el-button type="danger" icon="el-icon-delete" size="mini" @click="delItemData(item)">删除</el-button>
                      </div>
                    </div>
                    
                    <div class="activity_name" style="margin-left: 20px;" v-if="actData.canEnroll">
                      <el-button type="warning" size="mini" @click="addItemData" icon="el-icon-plus">添加自定义</el-button>
                    </div>
                      <el-alert title="自定义内容仅在管理端展示！" style="margin-top:20px" :closable="false" type="warning" show-icon></el-alert>
                  </div>
                </div>
                <!-- 开启分组模块 -->
                <div class="seizhi4_theader">
                  <div class="tab_title">分组设置</div>
                  <div class="active_box">
                    <div class="activity_name">分组开启</div>
                    <div style="margin-left: 10px;margin-top:10px">
                      <el-radio-group v-model="actData.showGroup" fill="#6f8cf0" @change="sendData">
                        <el-radio-button :label="false">关闭</el-radio-button>
                        <el-radio-button :label="true">开启</el-radio-button>
                      </el-radio-group>
                    </div>
                    <el-button size="small" v-if="actData.showGroup" type="warning" style="margin-left:20px; margin-top:10px; height:32px" icon="el-icon-folder-add" @click="addGroup()">添加分组</el-button>
                  </div>
                  <div class="active_box" v-if="actData.showGroup">
                    <div class="activity_name">分组显示列数</div>
                    <div style="margin-left:10px;margin-top:10px;">
                      <el-radio-group v-model="actData.groupCols" fill="#6f8cf0" @change="sendData">
                        <el-radio-button :label="1">一列</el-radio-button>
                        <el-radio-button :label="2">两列</el-radio-button>
                        <el-radio-button :label="3">三列</el-radio-button>
                        <el-radio-button :label="4">四列</el-radio-button>
                      </el-radio-group>
                    </div>
                  </div>
                  <div class="itemData" style="padding: 20px;border: 1px solid #03A9F4;border-radius: 5px;" v-if="actData.showGroup">
                      <el-row v-for="(item, index) in actData.groups" :key="index">
                        <el-row>
                          <el-col :span="10">
                            <el-input v-model="item.name" size="small" maxlength="12" placeholder="请输入分组名称" @blur="sendData" style="width:200px">
                              <template slot="prepend">
                                名称
                              </template>
                            </el-input>
                          </el-col>
                          <el-col :span="4">
                            <el-input-number v-model="item.sort" label="排序" controls-position="right" :step-strictly="true"	 :min="1" size="small" style="width:90px">
                            </el-input-number>
                          </el-col>
                          <el-col :span="8">
                            <el-button type="warning" size="small" @click="delGroupData(item)">删除</el-button>
                            <!-- <el-button type="primary" size="small" @click="addGroup(item)">添加分组</el-button> -->
                          </el-col>
                        </el-row>
                        <el-row v-for="(subitem, subidx) in item.subGroups" style="padding-left:20px" :key="subidx">
                          <el-row>
                            <el-col :span="10">
                              <el-input v-model="subitem.name" size="small" maxlength="12" @blur="sendData" placeholder="请输入分组名称" style="width:200px">
                                <template slot="prepend">
                                  名称
                                </template>
                              </el-input>
                            </el-col>
                            <el-col :span="6">
                              <el-input-number v-model="subitem.sort" label="排序" controls-position="right" :step-strictly="true"	 :min="1" size="small" style="width:100px">
                              </el-input-number>
                            </el-col>
                            <el-col :span="8">
                              <el-button type="warning" size="small" @click="delGroupData(subitem, item)">删除</el-button>
                              <!-- <el-button type="primary" size="small" @click="addGroup(subitem)">添加分组</el-button> -->
                            </el-col>
                          </el-row>
                          <el-row v-for="(ssitem, ssidx) in subitem.subGroups" style="padding-left:40px" :key="ssidx">
                            <el-col :span="10">
                              <el-input v-model="ssitem.name" size="small" maxlength="12" @blur="sendData" placeholder="请输入分组名称" style="width:200px">
                                <template slot="prepend">
                                  名称
                                </template>
                              </el-input>
                            </el-col>
                            <el-col :span="6">
                              <el-input-number v-model="ssitem.sort" label="排序" controls-position="right" :step-strictly="true"	 :min="1" size="small" style="width:100px">
                              </el-input-number>
                            </el-col>
                            <el-col :span="8">
                              <el-button type="warning" size="small" @click="delGroupData(ssitem, subitem)">删除</el-button>
                            </el-col>
                          </el-row>
                        </el-row>
                      </el-row>
                  </div>
                </div>
                <!-- 设置规则 -->
                <div class="seizhi4_theader">
                  <div class="tab_title">规则设置</div>
                  <div class="active_box flex_y_center" style="margin-top: 10px;">
                    <div class="activity_name flex_y_center" style="margin-top: 0px;line-height: 30px;">
                      周期设置
                    </div>
                    <div class="jiezhi_time_box flex_y_center" style="line-height: 32px; margin-top: 0px">
                      <el-radio-group v-model="actData.rule.cycle" @change="changeRuleText">
                        <el-radio :label="1">周期次数</el-radio>
                        <el-radio :label="2">固定次数</el-radio>
                      </el-radio-group>
                    </div>
                    <div class="wen_ts">
                      <img src="../assets/img/wen.png" alt="" class="wen" />
                      <span class="fswxts">周期次数：每天都可以投票，固定次数：活动期间可投票次数 </span>
                    </div>
                  </div>
                  <div class="active_box flex_y_center">
                    <div class="activity_name flex_y_center" style="margin-top: 0px;line-height: 30px;">
                      单选/多选
                    </div>
                    <div class="jiezhi_time_box flex_y_center" style="line-height: 32px; margin-top: 0px">
                      <el-radio-group v-model="actData.rule.multi" @change="changeRuleText">
                        <el-radio :label="false">单选</el-radio>
                        <el-radio :label="true">多选</el-radio>
                      </el-radio-group>
                    </div>
                  </div>
                  <div class="jiezhi_time_box" style="line-height: 32px;margin-top: 10px;">
                    <div class="xuanze_txt activity_name flex_y_center" style="margin: 0px; display: flex;">
                      次数限制
                      <div class="label flex_y_center">
                        每个微信可以投
                        <el-input-number v-model="actData.rule.userLimit" :min="1" :max="100" controls-position="right" @change="userLimitChange"></el-input-number>
                        次
                      </div>
                    </div>
                  </div>
                  <div class="jiezhi_time_box" style="line-height: 32px;margin-top: 10px;" v-if="actData.rule.multi==false">
                    <div class="xuanze_txt activity_name flex_y_center" style="margin: 0px; display: flex;">
                      【单选】
                      <div class="label flex_y_center">
                        可为同一选手投
                        <el-input-number v-model="actData.rule.playerLimit" :min="1" :max="actData.rule.userLimit" controls-position="right" @change="playerLimitChange"></el-input-number>
                        票
                      </div>
                    </div>
                  </div>
                  <div class="jiezhi_time_box" style="line-height: 32px;margin-top: 10px;" v-if="actData.rule.multi">
                    <div class="xuanze_txt activity_name flex_y_center" style="margin: 0px; display: flex;">
                      【多选】
                      <div class="label flex_y_center">
                        最少选择
                        <el-input-number :min="1" :max="actData.rule.playerMaxLimit" v-model="actData.rule.playerMinLimit" controls-position="right" @change="playerMinLimitChange"></el-input-number>
                        个选手
                      </div>
                      <div class="label flex_y_center">
                        最多选择
                        <el-input-number :min="1" :max="10" v-model="actData.rule.playerMaxLimit" controls-position="right" @change="playerMaxLimitChange"></el-input-number>
                        个选手
                      </div>
                    </div>
                  </div>
                  <div class="active_box">
                    <div class="activity_name">分组投票规则</div>
                    <div style="margin-left: 10px;margin-top:10px">
                      <el-radio-group v-model="actData.GroupRules" fill="#6f8cf0" @change="sendData">
                        <el-radio-button :label="false">关闭</el-radio-button>
                        <el-radio-button :label="true">开启</el-radio-button>
                      </el-radio-group>
                    </div>
                    <el-button size="small" v-if="actData.showGroup" type="warning" style="margin-left:20px; margin-top:10px; height:32px" icon="el-icon-folder-add" @click="addGroup()">添加分组</el-button>
                  </div>
                  <div class="active_box" style="margin-top: 10px; margin-bottom: 10px">
                    <div class="activity_name">活动规则文字</div>
                  </div>
                  <el-input type="textarea" v-model="actData.ruleText" @change="sendData" rows="3"></el-input>
                </div>
                <!-- 防刷票模块 -->
                <div class="seizhi4_theader">
                  <div class="tab_title">防刷票</div>
                  <div class="active_box" style="margin-top: 10px; margin-bottom: 10px">
                    <div class="activity_name">开启验证码</div>
                    <el-radio-group v-model="actData.showAuth"  style="margin-top:10px" fill="#6f8cf0">
                      <el-radio-button :label="false">关闭</el-radio-button>
                      <el-radio-button :label="true">开启</el-radio-button>
                    </el-radio-group>
                  </div>
                  <div class="active_box flex_y_center" style="margin-top: 0px">
                    <div class="activity_name flex_y_center">开启智能防刷</div>
                    <el-radio-group v-model="actData.antiRepeatVote" fill="#6f8cf0">
                      <el-radio-button :label="false">关闭</el-radio-button>
                      <el-radio-button :label="true">开启</el-radio-button>
                    </el-radio-group>
                    <div class="wen_ts">
                      <img src="../assets/img/wen.png" alt="" class="wen" />
                      <span class="fswxts">可有效减少机器刷票 </span>
                    </div>
                  </div>
                  <div class="active_box flex_y_center" style="margin-top: 10px">
                    <div class="activity_name flex_y_center">微信黑名单防刷</div>
                    <div class="jiezhi_time_box flex_y_center" style="line-height: 32px;margin-top: 0px; margin-left: 15px;margin-right: 15px;">
                      <el-radio-group v-model="actData.antiLevel" fill="#6f8cf0">
                        <el-radio :label="0">关</el-radio>
                        <el-radio :label="1">低</el-radio>
                        <el-radio :label="2">中</el-radio>
                        <el-radio :label="3">高</el-radio>
                      </el-radio-group>
                    </div>
                    <div class="wen_ts" style="margin-top: 0px; margin-left: 5px">
                      <img src="../assets/img/wen.png" alt="" class="wen" />
                      <span class="fswxts">利用我们大数据平台云分析系统独有的算法，进行分析刷票的账号特征，总结出并不断更新的黑名单名册。</span>
                    </div>
                  </div>
                  <div class="active_box flex_y_center" style="margin-top: 0px">
                    <div class="activity_name flex_y_center">可投地区</div>
                    <el-cascader placeholder="可输入名称搜索" v-model="allowArea" style="width:80%" :options="areaData"  @change="areaChange" :props="{ multiple: true }" filterable></el-cascader>
                    <div class="wen_ts" style="margin-top: 0px; margin-left: 5px">
                      <img src="../assets/img/wen.png" alt="" class="wen" />
                      <span class="fswxts">该功能是通过用户投票的ip解析地区，不能保证完全准确，请谨慎使用</span>
                    </div>
                  </div>
                </div>
                <div class="activity_line"></div>
                <p style="font-size: 16px; color: red; margin: 10px 5px">保存发布后添加选手</p>
              </div>
              <div class="fabu_btn" @click="saveStep(4)">继续设置</div>
            </div>
            <!-- 第四步分享功能模块 -->
            <div class="set seizhi4" v-if="actIndex == 4">
              <div class="activity_con">
                <div class="seizhi4_theader">
                  <div class="tab_title">分享功能</div>
                  <div class="active_box" :key="actData.shwoShare">
                    <div class="activity_name">微信分享</div>
                    <div style="margin-top:1px;margin-left:22px">
                      <el-radio-group v-model="actData.showShare" fill="#6f8cf0" @change="changeShare">
                        <el-radio-button :label="0">默认分享</el-radio-button>
                        <el-radio-button :label="1">禁止分享</el-radio-button>
                      </el-radio-group>
                    </div>
                  </div>
                  <div v-if="actData.showShare===0">
                  <div class="active_box flex_y_center" style="margin-top: 0px">
                    <div class="active_box flex_y_center" style="padding: 0px" >
                      <div class="activity_name" style="margin: 0px">活动分享图片</div>
                      <span style="color: rgb(229, 66, 66); font-size: 12px;margin-top: -2px;margin-left: 5px;">查看示例</span>
                      <div class="wen_ts" style="margin-top: 0px">
                        <img src="../assets/img/wen.png" alt="" class="wen" />
                        <img src="../assets/img/fenxiang.png" alt="" class="tstp" />
                      </div>
                    </div>
                  </div>
                  <div  class="flex_addbox flex_y_center">
                    <van-uploader v-model="fileList1" :max-count="1" upload-text="上传图片" name="shareIcon" :preview-options="previewConfig"
                     :before-read="uploadImgCheck" :after-read="uploadOneFile('shareIcon')" :before-delete="removeOneFile('shareIcon')" />
                  </div>
                  <div class="active_box flex_y_center" style="margin-top: 0px">
                    <div  class="activity_name">活动分享标题</div>
                    <div  class="textareatitle">
                      <el-input type="textarea" :disabled="userInfo.level<1"
                                :rows="2"
                                maxlength="50"
                                :placeholder="userInfo.level>0? '默认活动标题（创建后可修改）' : '自定义分享功能需要专业版以上会员'"
                                v-model="actData.share.actTitle">
                      </el-input>
                    </div>
                  </div>
                  <div class="active_box flex_y_center" style="margin-top: 0px">
                    <div  class="activity_name">活动分享内容</div>
                    <div  class="textareatitle">
                      <el-input type="textarea" :disabled="userInfo.level<1"
                                :rows="2"
                                maxlength="100"
                                :placeholder="userInfo.level > 0 ? ('投票时间：'+ stime +' 至 '+ etime) : '自定义分享功能需要专业版以上会员'"
                                v-model="actData.share.actContent">
                      </el-input>
                    </div>
                  </div>
                  <div class="active_box flex_y_center" style="margin-top: 0px">
                    <div class="active_box flex_y_center" style="padding: 0px" >
                      <div class="activity_name" style="margin: 0px">选手分享图片</div>
                      <span style="color: rgb(229, 66, 66); font-size: 12px;margin-top: -2px;margin-left: 5px;">查看示例</span>
                      <div class="wen_ts" style="margin-top: 0px">
                        <img src="../assets/img/wen.png" alt="" class="wen" />
                        <img src="../assets/img/fenxiang.png" alt="" class="tstp" />
                      </div>
                    </div>
                  </div>
                  <div  class="flex_addbox flex_y_center">
                    <van-uploader v-model="fileList3" :max-count="1" upload-text="上传图片" name="sharePlayer" :preview-options="previewConfig"
                    :before-read="uploadImgCheck" :after-read="uploadOneFile('sharePlayer')" :before-delete="removeOneFile('sharePlayer')" />
                  </div>
                  <div class="active_box flex_y_center" style="margin-top: 0px">
                    <div  class="activity_name">选手分享标题</div>
                    <div  class="textareatitle">
                      <el-input type="textarea" :disabled="userInfo.level<1"
                                :rows="2"
                                maxlength="50"
                                :placeholder="userInfo.level > 0 ? '我是{number}号{name},我正在参加{hd},快来支持我吧' : '自定义分享功能需要专业版以上会员'"
                                v-model="actData.share.playerTitle">
                      </el-input>
                    </div>
                  </div>
                  <div class="active_box flex_y_center" style="margin-top: 0px">
                    <div  class="activity_name">选手分享内容</div>
                    <div  class="textareatitle">
                      <el-input type="textarea" :disabled="userInfo.level<1"
                                :rows="2"
                                maxlength="100"
                                :placeholder="userInfo.level > 0 ? ('投票时间：'+ stime +' 至 '+ etime) : '自定义分享功能需要专业版以上会员'"
                                v-model="actData.share.playerContent">
                      </el-input>
                    </div>
                  </div>
                </div></div>
                <div class="seizhi4_theader">
                  <div class="tab_title">投票弹窗</div>
                  <div class="active_box flex_y_center" style="margin-top: 0px">
                    <div class="activity_name flex_y_center">投票弹窗开启</div>
                    <el-radio-group v-model="actData.showPopAd" @change="changeShowPopAd" fill="#6f8cf0" style="margin-left:20px">
                      <el-radio-button :label="false">关闭</el-radio-button>
                      <el-radio-button :label="true">开启</el-radio-button>
                    </el-radio-group>
                  </div>
                  <div class="activity_con" v-if="actData.showPopAd">
                    <div class="activity_name">
                      投票弹窗成功图片（建议尺寸550px*600px）
                    </div>
                    <div class="flex_addbox flex_y_center">
                      <van-uploader v-model="fileList2" :max-count="1" upload-text="上传图片" name="alertIcon" 
                      :preview-options="previewConfig" :before-read="uploadPopImageCheck" :after-read="uploadOneFile('pop')" :before-delete="removeOneFile('pop')" />
                    </div>
                  </div>
                  <div class="activity_con" v-if="actData.showPopAd">
                    <div class="activity_name">弹窗广告链接</div>
                    <el-input v-model="actData.popAdUrl" maxlength="200" style="width:70%;margin-left:15px" placeholder="请输入弹窗广告链接，必须以http://或https://开头"></el-input>
                  </div>
                </div>
                  <div class="seizhi4_theader">
                    <div class="tab_title">评论开启</div> 
                    <div class="active_box flex_y_center" style="margin-top: 0px">
                      <div class="activity_name flex_y_center">评论开启</div>
                      <el-radio-group v-model="actData.canReply" @change="changeReply" style="margin-left:20px" fill="#6f8cf0">
                        <el-radio-button :label="false">关闭</el-radio-button>
                        <el-radio-button :label="true">开启</el-radio-button>
                      </el-radio-group>
                    </div>
                  </div>
                  <div class="seizhi4_theader">
                    <div class="tab_title">底部设置</div>
                    <div class="active_box flex_y_center">
                      <div class="activity_name" style="margin: 0px">底部版权</div>
                      <div class="copyright_set flex_y_center" style="margin-left: 15px">
                        <el-radio-group v-model="actData.showSupport" @change="changeSupport">
                          <el-radio :label="1">展示</el-radio>
                          <el-radio :disabled="userInfo.level<3" :label="0">隐藏</el-radio>
                          <el-radio :disabled="userInfo.level<3" :label="2">自定义</el-radio>
                        </el-radio-group>
                      </div>
                    </div>
                    <div class="activity_name" v-if="actData.showSupport != 0" style="margin: 5px 0">
                      底部版权文字
                    </div>
                    <div class="textareatitle" v-if="actData.showSupport != 0">
                      <el-input type="textarea"
                                :rows="2"
                                :disabled="actData.showSupport != 2"
                                placeholder="筋斗云投票提供技术支持"
                                @change="changeSupportText"
                                v-model="actData.support">
                      </el-input>
                    </div>
                  </div>
                </div>
              <div class="fabu_btn" style="position: relative; z-index: 1000" @click="submitCreate">立即发布</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import User from '../../utils/user'
import Oss from '../../utils/oss'
import Ajax from '../../utils/ajax'
import Footer from '../components/Footer.vue'
import Header from '../components/Header.vue'
import VueUeditorWrap from 'vue-ueditor-wrap'
import { Toast } from 'vant'
export default {
  name: 'Create',
  components: {
    Header,
    Footer,
    VueUeditorWrap
  },
  data () {
    return {
      actIndex: 1,
      coverMax: 2,
      colorShow: true,
      autoname: '',
      disablee: false,
      audio: null,
      // 地址数据
      areaData: [],
      scrollTopFlag: 0,
      tempDomain: 'https://wx.jdytp.com',
      tempUrl: 'https://wx.jdytp.com/%s/index.html',
      mbUrl: 'https://wx.jdytp.com/0CWXf5/index.html',
      code: '',
      content: '',
      editorOption: {},
      // 用户信息
      userInfo: {},
      // 模板数据
      siteData: {},
      coverShow: false,
      coverIndex: 0,
      bgimgShow: false,
      bgimgIndex: 1,
      coverList: [],
      bgimgList: [],
      bgimgSite: [],
      fileList0: [],
      fileList1: [],
      fileList2: [],
      fileList3: [],
      coverImg: '',
      colorData: [
        { key: 1, color: 'background: rgb(82, 130, 240);' },
        { key: 2, color: 'background: rgb(49, 202, 177);' },
        { key: 3, color: 'background: rgb(229, 66, 66);' },
        { key: 4, color: 'background: rgb(255, 137, 57);' },
        { key: 5, color: 'background: rgb(255, 183, 18);' },
        { key: 6, color: 'background: rgb(29, 196, 123);' },
        { key: 7, color: 'background: rgb(68, 149, 247);' },
        { key: 8, color: 'background: rgb(175, 113, 237);' },
        { key: 9, color: 'background: rgb(255, 94, 139);' },
        { key: 10, color: 'background: -webkit-linear-gradient(left, rgb(51, 161, 252), rgb(163, 64, 251));' },
        { key: 11, color: 'background: -webkit-linear-gradient(left, rgb(4, 187, 224), rgb(33, 236, 179));' },
        { key: 12, color: 'background: -webkit-linear-gradient(left, rgb(253, 80, 110), rgb(249, 175, 66));' },
        { key: 13, color: 'background: #e60000;' },
        { key: 14, color: 'background: #29175b;' },
      ],
      footer: [
        { name: '首页', key: 'home', value: true },
        { name: '介绍', key: 'intro', value: true },
        { name: '排名', key: 'rank', value: true },
        { name: '搜索', key: 'search', value: true },
        { name: '报名', key: 'signup', value: false },
        { name: '自定义', key: 'custom', value: false }
      ],
      // 图片上传预览配置
      previewConfig: {
        closeable: true,
        showIndex: false,
        loop: false,
        maxZoom: 1
      },
      // 表单收集的数据
      actData: {
        title: '',
        notice: '',
        showNotice: false,
        covers:[],
        delcovers:[],
        shareId: '',
        bgImage: '',
        bgMusic: '',
        coverType: 1,
        drift: '',
        showBottomAd: false,
        bottomAdImage: '',
        bottomAdUrl: '',
        bottomMenu: '',
        btnText: '投票',
        startTime: 0,
        endTime: 0,
        groupCols: 1,
        // 是否开启开屏广告图
        showOpenAd: false,
        openAdImage: '',
        openIntro: false,
        playerCall: '选手',
        playerUnit: '个',
        tickUnit: '票',
        voteStart: -1,
        voteEnd: -1,
        ruleText: '',
        showSupport: 1,
        support: '',
        tempScript: '',
        tempStyle: '',
        tempId: 0,
        groups: [],
        sortType: 1,
        showType: 2,
        showAuth: false,
        showPopAd: false,
        showGroup: false,
        // 新增选手列数
        palyerCol:2,
        // 单列显示默认为左右
        singleCol:1,
        popAdImage: '',
        popAdUrl: '',
        showPlayerInfo: true,
        // 开启自主报名
        canEnroll: false,
        primaryColor: '',
        allowArea: '',
        antiRepeatVote: true,
        antiLevel: 3,
        canReply: false,
        // 是否开启选手审核
        verifyPlayer: false,
        // 是否开启微信分享,默认开启
        showShare:0,
        // 微信分享，内容
        share:{
          id: 0,
          actContent: '',
          actImage: '',
          actTitle: '',
          playerContent: '',
          playerImage: '',
          playerTitle: ''
        },
        // 选手投票规则
        rule: {
          id: 0,
          cycle: 1,
          userLimit: 1,
          playerLimit: 1,
          multi: false,
          playerMinLimit: 1,
          playerMaxLimit: 3
        },
        showLive: false,
        live: {
          id: 0,
          players: 20,
          style: 1,
          title: ''
        },
        //自主报名信息
        enroll: {
          id: 0,
          playerAudio: 0,
          playerAudioTitle: '选手音频',
          playerNameTitle: '选手名称',
          playerInfo: 2,
          playerInfoTitle: '选手简介',
          playerVideo: 0,
          playerVideoTitle: '选手视频',
          playerPhone: 2,
          playerPhoneTitle: '选手电话',
          playerPhoto: 1,
          playerPhotoMin: 1,
          playerPhotoMax: 3,
          playerPhotoTitle: '选手照片',
          startTime: 0,
          endTime: 0,
          items: null
        }
      },
      // 富文本编辑器配置对象
      editorConfig: {
        UEDITOR_HOME_URL: '/UEditor/',
        serverUrl: Ajax.serverUrl + '/common/uedit',
        autoHeightEnabled: false,
        initialFrameHeight: 340
      },
      allowArea: [],
      smbUrl: '',
      stime: '',
      etime: '',
      footerUrlShow: false,
      footerUrl: '',
      signupTime: [],
      // 活动时间
      actTimeRange: [],
      //投票时间段
      voteTimeRange: [],
      itemCount: 0,
      // 选择轮播图的数组
      sysCovers: [],
      // 选择背景图的数据
      sysBgImgs: [],
      // 背景音乐
      bgMusic: '',
      locMusic: null,
      showMusicUpload: false,
      iframe: null,
      inSubmit: false
    }
  },
  created () {
    this.setTitle('投票活动创建');
    this.userInfo = User.getInfo();
    this.iframe = document.getElementById('phonebox');
    if (this.$route.query.code) {
      this.code = this.$route.query.code;
      this.actData.shareId = this.code;
    }

    this.editorConfig.headers = {
      // 将s改成l
      'ccn':sessionStorage.getItem('ccn'),
      'cid':sessionStorage.getItem('vcid'),
      'token': encodeURIComponent(User.getToken())
    };
    switch(this.userInfo.level) {
      case 1:
        this.coverMax = 5;
        this.actData.enroll.playerPhotoMax = 5;
        break;
      case 3:
        this.coverMax = 6;
        this.actData.enroll.playerPhotoMax = 6;
        break;
      default:
        this.coverMax = 2;
        this.actData.enroll.playerPhotoMax = 2;
        break;
    }
    // 初始化模拟器
    this.setFrameEvent();
    //加载模板数据
    this.loadSiteData();
    // 加载默认模板
    this.getActData();
    this.audio = new Audio();
        // 模板id
    if(this.$route.query.tempId){
      // console.log(this.actData.tempId)
      let tempId=this.$route.query.tempId
      this.refreshTempUrl(tempId)
      // console.log(this.siteData.temps)
      // let item=this.siteData.temps.find(el=>el.tempId===tempId)
      // this.actData.tempId=item.id
      // console.log(this.actData.tempId)

    }
  },
  mounted () {
    window.addEventListener('scroll', this.handleScroll)
  },
  methods: {
    // 设置模拟器
    setFrameEvent(){
      if(this.iframe){
        if(this.iframe.attachEvent) {
          this.iframe.attachEvent('onload', this.onFrameLoaded);
        } else {
          this.iframe.onload = this.onFrameLoaded;
        }
      } else {
        setTimeout(function(that){
          that.iframe = document.getElementById('phonebox');
          that.setFrameEvent();
        }, 500, this);
      }
    },
    onFrameLoaded(){
      this.sendData();
    },
    // 刷新模板地址，传入手机中展示
    refreshTempUrl(tempId){
      // 设置默认模板
      if(!tempId) tempId = "0CWXf5";
      this.mbUrl = this.tempUrl.replace('%s', tempId);
      if(!this.iframe) this.iframe = document.getElementById('phonebox');
      if(this.iframe){
        this.iframe.src = this.mbUrl;
      }
    },
    loadSiteData(){
      //加载模板,
      this.siteData = {};
      Ajax.get('templete/list', {page: 1, size: 200}).then(res=>{
        if(res.code == 0){
          this.siteData.temps = res.data;
          if(this.actData.tempId < 1 && res.data.length > 0) {
            this.actData.tempId = res.data[0].id;
            // 设置默认模板
            if(!this.$route.query.tempId){
              // 如果不是从案例那边跳过
              this.refreshTempUrl(res.data[0].tempId);
            }
          }
        }
      }).catch(err=>{
        console.error(err);
      });
      //加载封面图分组
      Ajax.get('res/group', {type: 1}).then(res=>{
        if(res.code == 0){
          this.coverIndex = 0;
          this.siteData.coverGroup = res.data;
        }
      }).catch(err=>{
        console.error(err);
      })
      Ajax.get('res/group', {type:2}).then(res=>{
        if(res.code == 0){
          this.bgIndex = 0;
          this.siteData.bgGroup = res.data;
        }
      })
      //加载资源，背景图、漂浮物及背景音乐
      Ajax.get('res/list').then(res=>{
        if(res.code == 0){
          this.siteData.bgimgs = res.data.bgimgs;
          this.siteData.covers = res.data.covers;
          this.actData.delcovers = [];                 
          this.sysBgImgs = this.siteData.bgimgs;
          this.sysCovers = this.siteData.covers;
          this.siteData.music = res.data.music;
          this.siteData.drift = res.data.drift;
          this.siteData.domain = res.data.domain;
          // 加载完模板数据之后再初始化actData中的数据
          this.initAct();
        }
      }).catch(err=>{
        console.error(err);
      })
      //获取行政区划数据
      Ajax.get('common/district').then(res=>{
        if(res.code == 0){
          this.areaData = res.data;
        }
      }).catch(err=>{
        console.error(err);
      })
    },
    // 过100毫秒将数据传输到ifrome中手机展示
    retryExec(f, n){
      if(!n) n = 100;
      if(isNaN(n)) n = 100;

      if(typeof(f) == 'function') {
        setTimeout(function(){
          f();
        }, n);
      }
    },
    // 将表单填的数据发送到手机端展示
    sendData() {
      if(this.actData.palyerCol===1){
         this.actData.showType=2
      }
      this.iframe = document.getElementById('phonebox');
      if(this.iframe) {
        try {
          if(!this.iframe.contentWindow){
            this.retryExec(this.sendData);
          } else {
            // 将数据和目标域名实现跨域查看
            this.iframe.contentWindow.postMessage(this.actData, this.tempDomain);
          }
        } catch(err) {
          console.error(err);
        }
      } else {
        this.retryExec(this.sendData);
      }
    },
    getTime(d){
      var h = d.getHours(), m = d.getMinutes(), s = d.getSeconds();
      return h * 10000 + m * 100 + s;
    },
    changeVoteTime(){
      //修改投票时间
      this.actData.voteStart = this.getTime(this.voteTimeRange[0]);
      this.actData.voteEnd = this.getTime(this.voteTimeRange[1]);
      this.sendData();
    },
    changeTime(){
      //修改活动时间
      this.actData.startTime = parseInt(this.actTimeRange[0].getTime() / 1000);
      this.actData.endTime = parseInt(this.actTimeRange[1].getTime() / 1000);
      this.stime = this.formatDate(this.actTimeRange[0]);
      this.etime = this.formatDate(this.actTimeRange[1]);

      this.sendData();
    },
    playMusic(p){
      if(p && this.locMusic){
        this.audio.pause();
        this.audio.src = this.locMusic.url;
        this.audio.play();
      } else {
        this.audio.pause();
      }
    },
    // 删除背景音乐
    delMusic(){
      if(this.locMusic && this.locMusic.key) {
        Oss.remove(this.locMusic.key);
        this.$alert('背景音乐已删除');
        this.actData.bgMusic = "";
        this.locMusic = null;
        this.sendData();
      }
    },
    // 改变选手自主报名
    enrollChange(idx){
      this.actData.verifyPlayer = idx;
      this.sendData();
    },
    // 漂浮物改变
    driftChange(e){
      this.actData.drift = e;
      this.sendData();
    },
    // 改变选手报名时间
    enrollTimeChange(){
      if(this.signupTime){
        this.actData.enroll.startTime = parseInt(this.signupTime[0].getTime() / 1000);
        this.actData.enroll.endTime = parseInt(this.signupTime[1].getTime() / 1000);
      }
    },
    // 改变支持文字
    changeSupportText(){
      if(!this.checkMemberLevel(3)) {
        this.actData.showSupport = 1;
        this.actData.support = "";
        return;
      }
      this.sendData();
    },
    changeSupport(e){
      if(!this.checkMemberLevel(3)) {
        this.actData.showSupport = 1;
        return;
      }
      this.sendData();
    },
    handleScroll () {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      if (scrollTop >= 100) {
        this.scrollTopFlag = 1
      }
      if (scrollTop < 50) {
        this.scrollTopFlag = 0
      }
    },

    onEditorChange (e) {
      this.actData.intro = e.html
      this.sendData();
    },
    // 创建活动步骤
    actIndexClick (e) {
      // 判断一些属性是否填写必填
      if (this.actData.title === '') {
        Toast('请输入活动标题~!')
        return false
      }
      if(this.actData.startTime <= 0 || this.actData.endTime <= 0) {
        Toast('请选择活动时间');
        return false;
      }
      if ((!this.actData.covers || this.actData.covers.length == 0) && e > 2) {
        Toast('请选择或上传封面图~！')
        return false
      }
      // 如果开启了活动公告就不能为空
      if(this.actData.showNotice && this.isEmpty(this.actData.notice)) {
        Toast('活动公告不能为空');
        return false;
      }
      
      this.actIndex = e
      if(e == 4){
        if(!this.checkEnrollItems()) {
          Toast('选手报名字段标题不能为空');
          this.actIndexClick(3);
          return;
        }
      }
    },
    // 判断是否为空
    isEmpty(s){
      return !s || s == '' || s.trim() == '';
    },
    checkEnrollItems(){
      if(this.actData.canEnroll){
        var ed = this.actData.enroll;
        if(this.isEmpty(ed.playerNameTitle)) return false;
        if(this.isEmpty(ed.playerPhotoTitle)) return false;
        if(this.isEmpty(ed.playerInfoTitle)) return false;
        if(this.isEmpty(ed.playerAudioTitle)) return false;
        if(this.isEmpty(ed.playerVideoTitle)) return false;
        if(ed.items) {
          for(var i in ed.items) {
            if(this.isEmpty(ed.items[i].name)) return false;
          }
        }
      }

      return true;
    },
    coverShowChange (e) {
      this.coverShow = e > 0;
    },

    bgimgShowChange (e) {
      this.bgimgShow = e > 0;
    },
    // 添加自定义数据
    addItemData () {
      if (this.actData.canEnroll) {
        if(!this.actData.enroll.items) {
          this.actData.enroll.items = [];
        }
        if(this.actData.enroll.items.length >= 5) {
          Toast('最多只能添加5个自定义项目');
          return;
        }
        this.itemCount++;
        var item = { name: '自定义' + this.itemCount, type: 2, value: '' }
        this.actData.enroll.items.push(item);
      }
      this.sendData();
    },
    // 删除自定义数据
    delItemData (k) {
      if(this.actData.enroll.items){
        this.actData.enroll.items = this.actData.enroll.items.filter(x=> x != k);
      }
      this.sendData();
    },
    checkGroup(p){
      for(var i in p){
        var g = p[i];
        if(g.name == '' || g.name.trim() == '') {
          return false;
        }
        if(g.subGroups) {
          var r = this.checkGroup(g.subGroups);
          if(!r) return r;
        }
      }
      return true;
    },
    // 添加分组方法
    addGroup (p) {
      if(!this.actData.groups) this.actData.groups = [];
      if (this.actData.showGroup) {
        if(!this.checkGroup(this.actData.groups)) {
          Toast('分组名称不能为空');
          return;
        }
        var len = this.actData.groups.length;
        if(p) len = p.subGroups.length;
        var item = { name: '', sort: len + 1, id: 0, subGroups:[] }
        if(p) {
          p.subGroups.push(item);
        } else {
          this.actData.groups.push(item);
        }
      }
      this.sendData();
    },
    // 删除分组数据
    delGroupData (k, p) {
      var parent = p;
      if(!p || p == undefined) {
        this.actData.groups = this.actData.groups.filter(x => x != k);
      } else {
        parent.subGroups = parent.subGroups.filter(x=> x != k);
      }
      if(k.id && k.id > 0){
        Ajax.delete('activity/delete/group/' + k.id + '?act=' + this.code).then(res=>{
          if(res.code == 0){
            //删除成功
          }
        }).catch(err=>{
          console.error(err);
        })
      }
      this.sendData();
    },
    // 移除轮播图片
    coverListRemove (file) {
      //检查是否为系统图,还是从本地上传的
      if(!file.sys) {
        file.sys = this.checkSysCover(file.key);
      }

      if(file.key && !file.sys) {
        // Oss.remove(file.key);
        if(this.actData.delcovers.length == 0){
          this.actData.delcovers = [];
        }        
        this.actData.delcovers.push(file.key);
      }
      var i = this.actData.covers.findIndex(x => file.url.indexOf(x)>=0);
      if(i>=0) {
        this.actData.covers.splice(i, 1);
      } else if(this.actData.covers.length == 1) {
        this.actData.covers = [];
      }
      i = this.coverList.findIndex(x=> x.url.indexOf(file.url)>=0);
      if(i>=0) this.coverList.splice(i,1);
      this.sendData()
    },
    createSite () {
      
    },
    changeShare(){
      if(!this.checkMemberLevel(3)) {
        this.actData.showShare = 0;
      }
    },
    changeReply(){
      if(!this.checkMemberLevel(3)) {
        this.actData.canReply = false;
      }
    },
    // 选择主题图片，轮播图
    coverClick(url){
      this.coverShow = false;
      var key = url, imgUrl = this.siteData.domain + url;
      var ary = this.coverList.filter(x => x.sys);
      if(ary && ary.length > 0) {
        var old = ary[0].key;
        ary[0].key = key;
        ary[0].url = imgUrl;
        for(var i in this.actData.covers) {
          if(this.actData.covers[i].indexOf(old)>=0){
            this.actData.covers[i] = key;
            break;
          }
        }
      } else {
        if(this.coverList.length >= 6) {
          Toast('最多只能有' + this.coverMax + '张轮播图');
          return;
        }
        this.actData.covers.push(key);
        this.coverList.push({url: imgUrl, key: key, sys: true});
      }
      this.sendData();
    },
    bgChange(e){
      this.bgIndex = e;
      if(e == 0){
        this.sysBgImgs = this.siteData.bgimgs;
      } else if(e == -1){
        this.sysBgImgs = this.siteData.bgimgs.filter(x=> x.hot);
      } else {
        this.sysBgImgs = this.siteData.bgimgs.filter(x=>x.groupId==e);
      }
    },
    // 选择系统封面
    coverChange (e) {
      this.coverIndex = e
      if(e == 0) {
        this.sysCovers = this.siteData.covers;
      } else if(e == -1){
        this.sysCovers = this.siteData.covers.filter(x => x.hot);
      } else {
        this.sysCovers = this.siteData.covers.filter(x => x.groupId == e);
      }
    },
    // 选择背景图片
    bgImgClick (e) {
      this.actData.bgImage = e
      const img = { name: e, url: this.siteData.domain + e }
      this.bgimgSite = [img]
      this.bgimgShow = false;
      this.sendData()
    },
    // 移除背景图片
    bgImageRemove (file) {
      if(file.key){
        var isSys = false;
        if(this.siteData.bgimgs) {
          var ary = this.siteData.bgimgs.filter(x => x.url == file.key);
          isSys = ary && ary.length > 0;
        }
        if(!isSys) {
          Oss.remove(file.key);
        }
      }
      this.actData.bgImage = ''
      this.bgimgSite = []
      this.sendData()
    },
    // 模板和主题颜色改变,通过tempid改变模板
    actDataFieldChange(item, type){
      if(type == 'color') {
        this.actData.primaryColor = item;
      } else if(type == 'muban') {
        this.colorShow = item.colorShow;
        this.refreshTempUrl(item.tempId);
        this.actData.tempId = item.id;
        this.coverList = [];
        this.actData.covers = [item.cover];
        this.coverList.push({url: this.siteData.domain + item.cover, key: item.cover});
        // if(item.tempId=="PGyPiT"){
        //   // 判断选择文字模板的时候默认没有封面
        //   this.actData.covers=[]
        //   this.coverList=[]
        // }
        
      }
      this.sendData();
    },
    // 上传音乐文件
    uploadMusicCheck(file){
      var isMp3 = file.type == "audio/mpeg";
      var isLt10m = file.size / 1024 / 1024 < 10;
      if(!isMp3){
        Toast('背景音乐只支持MP3格式！')
      }
      if(!isLt10m){
        Toast('背景音乐文件大小不能超过10MB！')
      }
      return isMp3 && isLt10m;
    },
    // 会员等级
    checkMemberLevel(l){
      var m;
      if(l == 3) {
        m = "此功能只对企业版及以上会员开放";
      } else {
        m = "此功能只对专业版及以上会员开放";
      }
      if(this.userInfo.level < l) {
        this.$alert(m, {type: 'warning'});
        return false;
      }
      return true;
    },
    // 开启投票弹窗
    changeShowPopAd(){
      if(!this.checkMemberLevel(3)){
        this.actData.showPopAd = false;
      }
    },
    uploadPopImageCheck(file){
      //上传弹出广告检测
      if(!this.checkMemberLevel(3)) return false;
      return this.uploadImgCheck(file);
    },
    uploadBgImageCheck(file){
      //上传背景图前检测
      if(!this.checkMemberLevel(1)) return false;
      return this.uploadImgCheck(file);
    },
    // 上传图片之前校验
    uploadImgCheck (file, details) {
      // console.log(file,details)
      if(details && this.userInfo.level < 1) {
        if(details.name == "shareIcon" || details.name == "sharePlayer") {
          this.$alert('自定义分享功能需要专业版以上会员', {type:'warning'});
          return false;
        }
      }

      const isIMAGE = file.type === 'image/jpeg' || 'image/gif' || 'image/png'
      const isLt1M = file.size / 1024 / 1024 < 3
      if (!isIMAGE) {
        Toast('上传文件只能是图片格式!')
      }
      if (!isLt1M) {
        Toast('上传文件大小不能超过 3MB!')
      }
      return isIMAGE && isLt1M
    },
    // 上传一个文件处理
    uploadOneFile (field) {
      return file => {
        this.uploadFile(file.file, field);
      }
    },
    // 移除一个文件处理
    removeOneFile (field) {
      if (field == 'shareIcon')
        this.actData.share.actImage = '';
      else if (field == 'sharePlayer')
        this.actData.share.playerImage = '';
      /*else if (field == 'pop')
        this.actData.popAdImage = '';*/
    },
    // 保存进入到下一步,并将滚动到顶部
    saveStep (e) {
      this.actIndexClick(e);
      window.scrollTo(0,0);
      this.sendData();
    },
    uploadMusic(file){
      this.uploadFile(file.file, 'music');
      return false;
    },
    // 上次文件处理
    uploadFile(file, type){
      var fileName = this.getRemoteName(file, type == 'music' ? 'audio' : 'image');
      const that = this;
      Oss.upload(file, fileName, function(err, data){
        if(!err && data.statusCode == 200) {
          //上传成功
          var key = data.key ? data.key : null;
          var loc = data.Location;
          if(!key) {
            var n = loc.indexOf('/', 8);
            key = loc.substr(n+1);
          }
          loc = that.siteData.domain + '/' + key; // 'https://' + loc;
          if(type == 'cover') {
            that.coverList.push({ url: loc, key: key, sys: false });
            that.actData.covers.push(key);
          } else if(type == 'qdicon') {
            that.actData.openAdImage = key;
            this.fileList0 = [{url: loc, key: key}];
          } else if(type == 'bgimg'){
            that.bgimgSite = [{key: key, url: loc}];
            that.actData.bgImage = key;
          } else if(type == 'shareIcon') {
            that.actData.share.actImage = key;
            that.fileList1 = [{key: key, url: loc}];
          } else if(type == 'sharePlayer') {
            that.actData.share.playerImage = key;
            that.fileList3 = [{key: key, url: loc}];
          } else if(type == 'music') {
            that.actData.bgMusic = key;
            that.locMusic = {key: key, url: loc};
            that.playMusic(true);
          } else if(type == 'pop') { //弹窗广告图
            that.fileList2 = [{key: key, url: loc}];
            that.actData.popAdImage = key;
          }
          that.$alert('上传成功', {type:'success'});
          that.sendData();
        } else {
          that.$alert('上传失败', {type:'error'});
        }
      });
    },
    // 上传轮播图片
    uploadCover (file) {
      if(!this.uploadImgCheck(file)) return false;
      if (this.actData.covers.length > 5) {
        Toast('图片最多只能上传六张~')
        return false
      }
      this.uploadFile(file, 'cover');
    },
    // 提交创建
    submitCreate () {
      if(this.inSubmit) return;
      let j = 0
      for (var i = 0; i < this.footer.length; i++) {
        if (this.footer[i].value) {
          j++
        }
      }
      if (j > 5) {
        Toast('最多只能允许五个底部菜单，请重新设置')
        this.actIndexClick(2)
        return false
      }

      var ary = this.footer.filter(x=> x.value);
      this.actData.bottomMenu = JSON.stringify(ary);

      if(!this.checkGroup(this.actData.groups)) {
        Toast('分组名称未填写');
        this.actIndexClick(3);
        return false;
      }
      this.inSubmit = true;
      this.$loading({fullscreen:true});

      Ajax.post('activity/create', this.actData).then(res=>{
        this.$loading().close();
        if(res.code == 0){

          Toast('发布成功');
          setTimeout(function(that){
            that.$router.replace('/Manage');
          }, 1000, this);

        if(this.actData.delcovers.length > 0){
          for(var i in this.actData.delcovers) {
            var key = this.actData.delcovers[i];
            // console.log(key);
            Oss.remove(key);
          }          
        }

  
        } else {
          this.inSubmit = false;
          Toast('发布失败：' + res.msg);
        }
      }).catch(err=>{
        this.inSubmit = false;
        this.$loading().close();
        Toast('网络错误，发布失败');
        console.error(err);
      })
    },
    // 获取活动信息，传入参数是活动id
    getActData () {
      if (this.code !== '') {
        Ajax.get('activity/info/' + this.code).then(res=>{
          if(res.code == 0) {
            this.colorShow = res.data.tempCode == '0CWXf5';
            this.actData = res.data;
            this.actData.delcovers = [];   
            this.siteData.domain = res.data.cdn;
            if(this.siteData.temps && this.siteData.temps.length > 0) {
              var ary = this.siteData.temps.filter(x=> x.id == res.data.tempId);
              if(ary && ary.length > 0) {
                this.refreshTempUrl(ary[0].tempId);
              }
            }
            //延时更新模拟器中的数据
            setTimeout(function(that){
              that.sendData();
            }, 1000, this);
          } else {
            Toast(res.msg);
          }
          this.initAct();
        }).catch(err=>{
          this.$alert('网络错误，获取数据失败');
          console.error(err);
          this.initAct();
        });
      } else {
        this.initAct();
      }
    },
    startWith(str, s){
      if(!str) return false;
      if(!s) return false;

      return str.indexOf(s) == 0;
    },
    endWith(str, s){
      if(!str) return false;
      if(!s) return false;
      var n = str.lastIndexOf(s);
      return (n+s.length) == str.length;
    },
    // 初始化actdata中的数据
    initAct(){
      
      // 初始化投票规则
      this.changeRuleText();
      if(this.actData.tempId < 1 && this.siteData && 
          this.siteData.temps && this.siteData.temps.length > 0) {
        this.actData.tempId = this.siteData.temps[0].id;
      }
      this.allowArea = [];
      // 允许地域
      if(this.actData.allowArea) {
        var ary = this.actData.allowArea.split(',');
        for(var i in ary){
          var sub = ary[i].split('-');
          this.allowArea.push(sub);
        }
      }
      // 初始化活动开始时间和结束时间
      if(!this.code) {
        this.actData.startTime = this.getNowTime();
      }
      if(!this.code) {
        this.actData.endTime = this.actData.startTime + 15 * 24 * 3600;
      }
      // 将初始活动开始或者结束时间放入活动时间数组
      this.actTimeRange = [];
      this.actTimeRange.push(new Date(this.actData.startTime * 1000));
      this.actTimeRange.push(new Date(this.actData.endTime * 1000));
      if(!this.code){
        this.actTimeRange[1].setHours(22, 0, 0);
        this.actData.endTime = parseInt(this.actTimeRange[1].getTime() / 1000);
      }
      // 初始化投票时间段
      this.voteTimeRange = [];
      this.voteTimeRange.push(new Date(this.actData.startTime*1000));
      this.voteTimeRange.push(new Date(this.actData.endTime*1000));
      
      if(this.actData.voteStart < 0) {
        this.voteTimeRange[0].setHours(5, 0, 0);
        this.voteTimeRange[1].setHours(23, 59, 59);
        this.changeVoteTime();
      } else {
        var vhs = parseInt(this.actData.voteStart / 10000), 
            vms = parseInt(this.actData.voteStart % 10000 / 100), 
            vss = parseInt(this.actData.voteStart % 100),
            vhe = parseInt(this.actData.voteEnd / 10000), 
            vme = parseInt(this.actData.voteEnd % 10000 / 100),
            vse = parseInt(this.actData.voteEnd % 100);

        this.voteTimeRange[0].setHours(vhs, vms, vss);
        this.voteTimeRange[1].setHours(vhe, vme, vse);
      }
        // 初始化选手报名时间
      if(this.actData.enroll.startTime <= 0) {
        this.actData.enroll.startTime = this.actData.startTime;
      }
      if(this.actData.enroll.endTime <= 0) {
        this.actData.enroll.endTime = this.actData.endTime - 2 * 24 * 3600;
      }

      this.signupTime = [];
      this.signupTime.push(new Date(this.actData.enroll.startTime * 1000));
      this.signupTime.push(new Date(this.actData.enroll.endTime * 1000));

      this.stime = this.fromTimestamp(this.actData.startTime);
      this.etime = this.fromTimestamp(this.actData.endTime);
    
      // 初始化富文本中内容
      if(!this.code) {
        this.actData.intro = '<p style="text-align:center;"><strong style="font-size:18px;color:#E53333;">活动介绍</strong></p><p>1.	点击首页导航栏  “<span style="color:#E53333;">我要报名</span>”  即可参与活动，报名时请提交真实姓名和电话号码作为后期领奖凭证，参与活动。</p><p>2.	照片需符合“<span style="color:#E53333;">XX活动</span>” 主题，可自己进行创新，每张照片需附上“<span style="color:#E53333;">参赛宣言</span>”上传活动页面，审核后即可参与活动</p><p><br></p><p style="text-align:center;"><strong style="font-size:18px;color:#E53333;">投票规则</strong></p><p>1. 参赛者上传信息，严禁盗用他人照片等信息 </p><p>2.	禁止参赛作品出现任何非法内容、言论不当等行为</p><p>3.	作品设计著作权，肖像权等法律责任由活动参与者自行承担法律责任</p><p>4.	以上行为一经发现，主办方有权删除照片并 <span style="color:#E53333;">取消参赛资格</span></p><p>5.	禁止加入诱导关注/诱导分享内容</p><p><br></p><p style="text-align:center;"><strong style="font-size:18px;color:#E53333;">奖品说明</strong></p><p style="text-align:center;">1. 第一名：奖励 XXXX 一个</p><p style="text-align:center;">2. 第二名：奖励 XXXX 一个</p><p style="text-align:center;">3. 第三名：奖励 XXXX 一个</p><p><br></p><p style="text-align:center;"><strong style="font-size:18px;color:#E53333;">主办单位</strong></p><p style="text-align:center;">主办方：XXX公司</p><p style="text-align:center;">地址：北京市朝阳区XXX街XXX路X号</p><p style="text-align:center;">电话：010-8888888</p><p><br></p><p style="text-align:center;"><span style="color:#666">本活动最终解释权归XX公司所有！</span></p>';
        return;
        // 第一次初始化数据到此结束，创建的过程中code一直的空字符串，后面是数据修改回显后的方法执行
      }
       
      // 初始化背景音乐
      if(!this.actData.bgMusic) this.actData.bgMusic = "";
      this.bgMusic = this.actData.bgMusic;

      if(!this.actData.bottomMenu) {
        var ary = this.footer.filter(x=> x.value);
        this.actData.bottomMenu = JSON.stringify(ary);
      }
      var menu = JSON.parse(this.actData.bottomMenu);
      for(var i in this.footer){
        var f = this.footer[i], item = null;
        var ary = menu.filter(x => x.key == f.key);
        if(ary && ary.length > 0) item = ary[0];
        if(item){
          f.value = true;
          if(f.key == 'custom') {
            this.footerUrlShow = true;
            if(item.name) {
              f.name = item.name;
              this.autoname = f.name;
            }
            if(item.url){
              f.url = item.url;
              this.footerUrl = f.url;
            }
          }
        } else {
          f.value = false;
        }
      }
      const that = this;
      this.coverList = [];
      this.actData.covers.forEach((val, idx, ary) => {
        var v = val.toLowerCase();
        if(!that.startWith(v, 'http://') && !that.startWith(v, 'https://')) {
          v = that.siteData.domain + val;
        } else {
          v = val;
        }
        var isSys = that.checkSysCover(val);
        that.coverList.push({ url: v , key: val, sys: isSys});
      });
      if(this.actData.bgImage) {
        var bgkey = this.actData.bgImage;
        if(this.siteData.bgimgs){
          var ary = this.siteData.bgimgs.filter(x => x.url == this.actData.bgImage);
          if(!ary || ary.length == 0) {
            bgkey = null;
          }
        }

        this.bgimgSite = [{url: this.siteData.domain + this.actData.bgImage, key: bgkey}];
      }
      if(this.actData.openAdImage) {
        this.fileList0 = [{url: this.siteData.domain + this.actData.openAdImage}];
      }
      if(this.actData.popAdImage) {
        this.fileList2 = [{url: this.siteData.domain + this.actData.popAdImage}];
      }
      if(this.actData.share.actImage) {
        this.fileList1 = [{url: this.siteData.domain + this.actData.share.actImage}];
      }
      if(this.actData.share.playerImage) {
        this.fileList3 = [{url:this.siteData.domain + this.actData.share.playerImage}];
      }
      this.sendData();
    },
    // 选择系统封面
    checkSysCover(url){
      var isSys = false;
      if(this.siteData.covers) {
        var ary = this.siteData.covers.filter(x=>x.url == url);
        isSys = ary && ary.length > 0;
      }
      if(!isSys && this.siteData.temps){
        var ary = this.siteData.temps.filter(x => x.cover == url);
        isSys = ary && ary.length > 0;
      }

      return isSys;
    },
    // tab栏选择
    footerChange (e) {
      let j = 0
      this.footer.forEach((i, v) => {
        if (i.value) {
          j++
        }
      })
      if (j > 5) {
        Toast('最多设置五个底部菜单')
        this.footer[e].value = false
        return false
      }
      if (this.footer[e].value) {
        this.footer[e].value = true
        if (e === 5) {
          this.footerUrlShow = 1
        }
      } else {
        this.footer[e].value = false
        if (e === 5) {
          this.footerUrlShow = 0
          this.footer[e].name = '自定义'
        }
      }
      this.convertMenu();
    },
    formatDate(time){
      if(!(time instanceof Date)) return "";
      var y = time.getFullYear();
      var m = time.getMonth()+1;
      var d = time.getDate();
      var h = time.getHours();
      var mm = time.getMinutes();
      var s = time.getSeconds();
      return y+'-'+this.fill0(m)+'-'+ this.fill0(d)+' '+ this.fill0(h)+':'+ this.fill0(mm)+':'+ this.fill0(s);
    },
    fromTimestamp(t){
      if(!t) t = 0;
      var time = new Date(t * 1000);
      return this.formatDate(time);
    },
    fill0(n){
      return n>9 ? n : '0' + n;
    },
    getNowTime(){
      var date = new Date();
      return parseInt(date.getTime() / 1000);
    },
    getTimestamp (s) {
      var date = new Date(s);
      return parseInt(date.getTime() / 1000);
    },
    // 投票地区选择
    areaChange () {
      if(!this.allowArea) this.allowArea = [];
      if(!this.checkMemberLevel(3)) {
        this.actData.allowArea = "";
        return;
      }
      var area = [];
      for(var i in this.allowArea) {
        var ary = this.allowArea[i];
        if(ary instanceof Array) {
          area.push(ary.join('-'));
        } else {
          area.push(ary);
        }
      }
      this.actData.allowArea = area.join(',');
    },
    titleChange (e) {
      //修改活动标题
      this.sendData()
    },
    noticeChange(e){
      //修改活动公告
      this.sendData();
    },
    changeButtonText(){
      //修改按钮文本
      this.actData.tickUnit = this.actData.btnText == '点赞' ? '赞' : '票';
      this.sendData();
    },
    // 改变背景音乐
    musicChange (e) {
      if(e == 'clear') {
        this.showMusicUpload = false;
        this.actData.bgMusic = "";
        if(this.locMusic && this.locMusic.key){
          Oss.remove(this.locMusic.key);
        }
        this.locMusic = null;
      } else if(e == '') {
        this.showMusicUpload = true;
        return;
      } else {
        this.showMusicUpload = false;
        this.actData.bgMusic = e;
      }
      this.sendData();
    },
    footerNameInput () {
      //输入自定义菜单名称
      if (this.autoname.length > 3) {
        this.footer[5].name = this.autoname.substr(0, 3)
      } else {
        this.footer[5].name = this.autoname
      }
      this.convertMenu();
    },
    footerUrlInput(){
      //输入自定义菜单URL
      if(this.isEmpty(this.footerUrl)) {
        this.$alert('自定义菜单地址不能为空');
        return;
      }
      if(!this.startWith(this.footerUrl, "http://") && !this.startWith(this.footerUrl, "https://")) {
        this.$alert('URL地址必须以 http:// 或 https:// 开头');
        return;
      }

      this.footer[5].url = this.footerUrl;
      this.convertMenu();
    },
    convertMenu(){
      //将底部菜单转换为JSON数据
      var ary = this.footer.filter(x=> x.value);
      this.actData.bottomMenu = JSON.stringify(ary);
      this.sendData();
    },
    // 投票规则改变
    changeRuleText(){
      var t = '';
      if(this.actData.rule.cycle == 1) {
        t = '活动期间每天每个微信号可以投' + this.actData.rule.userLimit + (this.actData.rule.multi ? '次' : '票') + '，';
      } else {
        t = '活动期间每个微信号最多可以投' + this.actData.rule.userLimit + (this.actData.rule.multi ? '次' : '票') + '，';
      }
      if(this.actData.rule.multi) {
        if(this.actData.rule.playerMinLimit == this.actData.rule.playerMaxLimit) {
          t += '每次必须选择' + this.actData.rule.playerMinLimit + '个选手投票。';
        } else {
          t += '最少选择' + this.actData.rule.playerMinLimit + '个选手，最多选择' + this.actData.rule.playerMaxLimit + '个选手。';
        }
      } else {
        t += '最多可为同一选手投' + this.actData.rule.playerLimit + '票。';
      }
      
      this.actData.ruleText = t;
      this.sendData();
    },
    // 限制投票次数
    userLimitChange () {
      if (this.actData.rule.userLimit < 1 || !this.actData.rule.userLimit) {
        this.actData.rule.userLimit = 1
      }
      if (this.actData.rule.playerLimit > this.actData.rule.userLimit) {
        this.actData.rule.playerLimit = this.actData.rule.userLimit;
      }
      this.changeRuleText();
    },
    // 选手限制
    playerLimitChange () {
      if (this.actData.rule.playerLimit <= 0) {
        this.actData.rule.playerLimit = 1
      }
      if (this.actData.rule.playerLimit > this.actData.rule.userLimit) {
        this.actData.rule.playerLimit = this.actData.rule.userLimit;
      }
      this.changeRuleText();
    },
    // 选手最小限制
    playerMinLimitChange () {
      if(this.actData.rule.playerMinLimit < 1) {
        this.actData.rule.playerMinLimit = 1;
      }
      if (this.actData.rule.playerMinLimit > this.actData.rule.playerMaxLimit) {
        this.actData.rule.playerMinLimit = this.actData.rule.playerMaxLimit;
      }
      this.changeRuleText();
    },
    // 选手最大限制
    playerMaxLimitChange () {
      if(this.actData.rule.playerMaxLimit < 1) {
        this.actData.rule.playerMaxLimit = 1;
      }
      if (this.actData.rule.playerMaxLimit < this.actData.rule.playerMinLimit) {
        this.actData.rule.playerMinLimit = this.actData.rule.playerMaxLimit; 
      }
      this.changeRuleText();
    }
  }
}
</script>
<style>
  .el-checkbox__input.is-checked .el-checkbox__inner,
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    border-color: #6f8cf0 !important;
    background-color: #6f8cf0 !important;
  }

  .el-checkbox__input.is-checked + .el-checkbox__label {
    color: #6f8cf0 !important;
  }

  .el-checkbox__inner:hover {
    border-color: #6f8cf0 !important;
  }

  .el-checkbox__input.is-focus .el-checkbox__inner {
    border-color: #6f8cf0 !important;
  }
  .van-image-preview {
    z-index: 10000 !important;
  }
  .van-image-preview__overlay {
    z-index: 9000 !important;
  }
</style>
<style src="@/assets/css/create.css"  scoped></style>
